<template>
	<view class="common-list flex-between animated fadeInLeft fast">
		<view class="common-list-l">
			<image :src="item.userpic" mode=""></image>
		</view>
		<view class="ml10 common-list-r">
			<view class="flex-between align-item">
				<view class="flex align-item color-999-size-16">
					<text>{{ item.username }}</text>
					<view class="ml5 common-list-r-sex icon iconfont icon-nan" :class="[item.sex == 0 ? 'icon-nan':'icon-nv']">{{ item.age }}</view>
				</view>
				<view v-show="!isguanzhu" class="common-list-r-icon align-item" @tap="noticeTap">
					<text class="icon iconfont icon-zengjia"></text>
					<text class="ml5">关注</text>
				</view>
			</view>
			<view class="mt10 color-333-size-18">{{ item.title }}</view>
			<view class="mt10 common-list-r-img-video flex-column-center">
				<!-- 图片 -->
				<image v-if="item.titlepic" :src="item.titlepic" mode="widthFix" lazy-load="true"></image>
				<!-- 视频 -->
				<template v-if="item.video">
					<view class="common-list-play icon iconfont icon-bofang"></view>
					<view class="common-list-playinfo">
						{{ item.video.lonkNum }} 次播放 {{ item.video.long }}
					</view>
				</template>
				<!-- 分享 -->
				<view v-if="item.share" class="common-list-share flex align-item">
					<image :src="item.share.shareTitlePic" mode="widthFix" lazy-load="true"></image>
					<view class="color-666-size-16 ml10">{{ item.share.shareTile }}</view>
				</view>
			</view>
			<view class="mt5 flex-between color-999-size-14">
				<view class="flex">
					<view class="flex align-item">
						{{ item.path }}
					</view>
				</view>
				<view class="flex align-item">
					<view class="icon iconfont icon-pinglun1"></view>
					<text class="ml5">{{ item.commetNum }}</text>
					<view class="icon iconfont icon-zhuanfa ml15"></view>
					<text class="ml5">{{ item.shareNum }}</text>
					<view class="icon iconfont icon-dianzan1 ml15"></view>
					<text class="ml5">{{ item.zanNum }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item: Object,
			index: Number
		},
		data() {
			return {
				isguanzhu: this.item.isguanzhu
			}
		},
		methods: {
			// 关注
			noticeTap() { 
				this.isguanzhu = true
				uni.showToast({
					title: '关注成功'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 列表 */
	.common-list {
		padding: 20upx 20upx 0 20upx;
		// 头像
		.common-list-l{
			height: auto;
			&> image{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}
		}
		.common-list-r{
			flex: 1;
			padding: 10upx 0;
			border-bottom: 1upx solid #F0F0F0;
			// 性别
			.common-list-r-sex{
				background-color: #007AFF;
				padding: 0 10upx;
				border-radius: 20upx;
				font-size: 28upx;
				color: #FFFFFF;
				line-height: 36upx;
				height: 36upx;
				margin-top: 8upx;
			}
			// 关注
			.common-list-r-icon{
				padding: 5upx 15upx 5upx 10upx;
				background-color: #F4F4F4;
				.icon-zengjia {
					font-size: 28upx;
				}
			}
			// 展示内容图片
			.common-list-r-img-video{
				position: relative;
				image {
					width: 100%;
					border-radius: 20upx;
				}
				// 视频
				.common-list-play,
				.common-list-playinfo {
					position: absolute;
					color: #FFFFFF;
				}
				.common-list-play {
					font-size: 130upx;
				}
				.common-list-playinfo {
					background-color: rgba(51, 51, 51, .7);
					bottom: 8upx;
					right: 8upx;
					border-radius: 40upx;
					font-size: 25upx;
					padding: 10upx 15upx;
				}
				// 分享
				.common-list-share{
					width: 100%;
					background-color: #F4F4F4;
					padding: 15upx 0;
					border-radius: 10upx;
					image {
						width: 200upx;
						height: 100upx;
						border-radius: 5upx;
					}
				}
			}
		}
	}
</style>
